<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>500页面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C63FF',
                        secondary: '#FF6584',
                        accent: '#00D8FF',
                        dark: '#2D3748',
                        light: '#F7FAFC'
                    },
                    fontFamily: {
                        poppins: ['Poppins', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-gradient {
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-spin-slow {
                animation: spin 30s linear infinite;
            }
            .animate-pulse-soft {
                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }
        
        @keyframes float {
            0%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            25% {
                transform: translateY(-10px) rotate(2deg);
            }
            75% {
                transform: translateY(5px) rotate(-1deg);
            }
        }
    </style>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap"
        rel="stylesheet">
</head>

<body class="font-poppins bg-gradient-to-br from-light to-blue-50 min-h-screen flex flex-col overflow-x-hidden">
    <!-- 装饰元素 -->
    <div class="fixed top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -mr-32 -mt-32 blur-3xl"></div>
    <div class="fixed bottom-0 left-0 w-96 h-96 bg-secondary/5 rounded-full -ml-48 -mb-48 blur-3xl"></div>

    <!-- 主要内容 -->
    <main class="flex-grow container mx-auto px-4 py-16 md:py-24">
        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
                <!-- 左侧图形 -->
                <div class="relative">
                    <!-- 主图形 -->
                    <div class="relative w-full h-[300px] md:h-[400px] flex items-center justify-center">
                        <!-- 星球 -->
                        <div
                            class="absolute w-48 h-48 bg-gradient-to-br from-primary to-purple-500 rounded-full shadow-xl animate-float">
                            <div class="absolute w-8 h-8 bg-white/20 rounded-full top-1/4 left-1/4"></div>
                            <div class="absolute w-12 h-12 bg-white/10 rounded-full top-2/3 left-1/3"></div>
                            <div class="absolute w-6 h-6 bg-white/15 rounded-full top-1/2 right-1/4"></div>
                        </div>

                        <!-- 宇宙飞船 -->
                        <div class="absolute w-20 h-20 animate-float" style="animation-delay: 1s;">
                            <div class="w-full h-full relative">
                                <div
                                    class="w-16 h-8 bg-accent rounded-t-full absolute top-0 left-1/2 transform -translate-x-1/2">
                                </div>
                                <div
                                    class="w-12 h-6 bg-accent/80 rounded-b-full absolute bottom-0 left-1/2 transform -translate-x-1/2">
                                </div>
                                <div
                                    class="w-4 h-4 bg-white rounded-full absolute top-2 left-1/2 transform -translate-x-1/2">
                                </div>
                                <div
                                    class="w-2 h-6 bg-accent/70 absolute bottom-6 left-1/2 transform -translate-x-1/2 -rotate-12">
                                </div>
                            </div>
                        </div>

                        <!-- 漂浮的500 -->
                        <div class="absolute flex space-x-4 text-6xl md:text-8xl font-bold text-dark">
                            <span class="text-accent animate-float" style="animation-delay: 0.2s;">5</span>
                            <span class="text-secondary animate-float" style="animation-delay: 0.4s;">0</span>
                            <span class="text-secondary animate-float" style="animation-delay: 0.6s;">0</span>
                        </div>
                    </div>

                    <!-- 漂浮的小行星 -->
                    <div class="absolute top-1/4 right-10 w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full shadow-lg animate-float"
                        style="animation-delay: 2s; animation-duration: 8s;"></div>
                    <div class="absolute bottom-1/4 left-5 w-12 h-12 bg-gradient-to-br from-green-400 to-teal-500 rounded-full shadow-lg animate-float"
                        style="animation-delay: 3s; animation-duration: 7s;"></div>
                </div>

                <!-- 右侧内容 -->
                <div class="text-center md:text-left">
                    <h1
                        class="text-[clamp(2.5rem,6vw,4rem)] font-extrabold bg-gradient-to-r from-primary via-secondary to-accent text-gradient mb-6">
                        遭遇了一点点小问题
                    </h1>
                    <p class="text-[clamp(1rem,2vw,1.25rem)] text-dark/80 mb-8 leading-relaxed">
                        请稍后再试.
                    </p>

                    <div class="flex flex-col sm:flex-row justify-center md:justify-start gap-4 mb-12">
                        <a href="#"
                            class="px-8 py-4 bg-primary hover:bg-primary/90 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 flex items-center justify-center">
                            <i class="fa fa-rocket mr-2"></i> 返回首页
                        </a>
                    </div>

                    <div class="mb-8">
                        <h3 class="font-semibold text-lg mb-3">你可以通过以下方式解决问题</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-primary hover:underline flex items-center"><i
                                        class="fa fa-angle-right mr-2"></i> 关于我们</a></li>
                            <li><a href="#" class="text-primary hover:underline flex items-center"><i
                                        class="fa fa-angle-right mr-2"></i> 帮助中心</a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </main>

    <!-- JavaScript -->
    <script>

        document.addEventListener('DOMContentLoaded', () => {

            const starsContainer = document.querySelector('main');

            for (let i = 0; i < 50; i++) {
                const star = document.createElement('div');
                const size = Math.random() * 3 + 1;

                star.style.position = 'absolute';
                star.style.width = `${size}px`;
                star.style.height = `${size}px`;
                star.style.background = Math.random() > 0.5 ? '#fff' : '#6C63FF';
                star.style.borderRadius = '50%';
                star.style.left = `${Math.random() * 100}%`;
                star.style.top = `${Math.random() * 100}%`;
                star.style.opacity = Math.random() * 0.8 + 0.2;
                star.style.animation = `pulse ${Math.random() * 5 + 3}s infinite`;

                starsContainer.appendChild(star);
            }

            const buttons = document.querySelectorAll('a');
            buttons.forEach(button => {
                button.addEventListener('mouseenter', function (e) {
                    this.classList.add('scale-105');
                });

                button.addEventListener('mouseleave', function (e) {
                    this.classList.remove('scale-105');
                });
            });
        });
    </script>
</body>

</html>